<template>
    <div class="management">
        <!-- tab切换 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
                :label="`出售中商品（${onSale}）`"
                name="1"
            ></el-tab-pane>
            <el-tab-pane
                :label="`仓库中商品（${warehouse}）`"
                name="2"
            ></el-tab-pane>
            <el-tab-pane
                :label="`已经告罄商品（${sellOut}）`"
                name="0"
            ></el-tab-pane>
            <el-tab-pane
                :label="`商品回收站（${recycleBin}）`"
                name="-1"
            ></el-tab-pane>
        </el-tabs>
        <!-- 筛选条 -->
        <div class="search_bar">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="box">
                        <div class="search_title">商品分类：</div>
                        <el-select
                            @change="pageChange(1)"
                            v-model="commodityClass"
                            clearable
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="box">
                        <div class="search_title">商品搜索：</div>
                        <el-input
                            v-model="commodityKeyowrd"
                            placeholder="请输入关键字，id，商品名称"
                        ></el-input>
                    </div>
                </el-col>
                <el-col :span="8" style="text-align: right">
                    <el-button
                        type="primary"
                        style="text-align: right"
                        @click="$router.push('/commodity/add')"
                        >添加商品</el-button
                    >
                </el-col>
            </el-row>
        </div>
        <!-- 表格 -->
        <!-- flex: 1; overflow: auto -->
        <el-table :data="commodityData" style="width: 100%" height="200">
            <el-table-column prop="id" label="ID" width="200">
            </el-table-column>
            <el-table-column prop="image" label="商品图" width="150">
                <template slot-scope="scope">
                    <img :src="scope.row.image" alt="" />
                </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称"> </el-table-column>
            <el-table-column prop="price" label="商品售价"> </el-table-column>
            <el-table-column prop="sales" label="销量" width="80">
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="80">
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="80">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
                <template slot-scope="scope">
                    <!-- 点开关 去掉接口，接口告诉你修改成功没有， 成功的话直接前端把开关数据给改了就行 -->
                    <el-switch
                        :value="scope.row.status === 1"
                        @input="setStatus($event, scope.row)"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="optionDate" label="操作时间" width="200">
                <template slot-scope="scope">
                    {{ scope.row.optionDate | timeToDate }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template>
                    <!-- slot-scope="scope" -->
                    <el-button type="text" size="small"> 查看 </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="footer">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :current-page="pageIndex"
                :page-size="pageSize"
                @current-change="pageChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: '1',
            pageIndex: 1,
            pageSize: 10,
            onSale: 0, // 出售中
            warehouse: 0, // 仓库中
            sellOut: 0, // 售空
            recycleBin: 0, // 回收站
            total: 0,
            options: [
                { value: 1, label: '母婴' },
                { value: 2, label: '电器' },
                { value: 3, label: '水果' },
                { value: 4, label: '家用' },
                { value: 5, label: '医疗' },
                { value: 6, label: '美容' },
            ],
            commodityClass: null,
            commodityKeyowrd: '',
            commodityData: [],
            loadingBool: false,
            timer: null, // 防抖
        }
    },
    created() {
        this.pageChange(1)
    },
    filters: {
        timeToDate(value) {
            return new Date(value.split(' ')[0]).toLocaleString()
        },
    },
    watch: {
        commodityKeyowrd() {
            // 什么防抖 防止函数抖动
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                this.pageChange(1)
            }, 700)
        },
    },
    methods: {
        // 修改状态
        setStatus(status, row) {
            // this.$api.setStatus({
            //     id: row.id,
            //     status: status ? 1 : 2,
            // })
            // 掉个接口
            setTimeout(() => {
                // 接口返回成功响应
                row.status = status ? 1 : 0
            }, 500)
        },
        handleClick() {
            this.pageChange(1)
        },
        pageChange(ind) {
            this.loadingBool = true
            this.pageIndex = ind
            // 在mounted中请求数据会有什么问题
            this.$api
                .getCommodityList({
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    status: this.activeName, // 状态
                    classId: this.commodityClass, // 分类id
                    keyword: this.commodityKeyowrd, // 关键字
                })
                .then((res) => {
                    if (res.code === 1) {
                        // 赋值数据
                        this.commodityData = res.data.list
                        this.onSale = res.data.onSale
                        this.warehouse = res.data.warehouse
                        this.sellOut = res.data.sellOut
                        this.total = res.data.total
                        this.recycleBin = res.data.recycleBin
                    }
                    this.loadingBool = false
                })
        },
    },
    components: {},
}
</script>

<style lang='scss'>
@import '@css/style.scss';
.management {
    display: flex;
    flex-direction: column;
    height: 100%;
    .search_bar {
        width: 100%;
        padding: 10px;
        .box {
            width: 100%;
            display: flex;
            .search_title {
                padding: 0 10px;
                white-space: nowrap;
                line-height: 40px;
            }
            &:nth-child(2) {
                flex: 1;
            }
        }
    }
    .footer {
        width: 100%;
        padding: 15px;
        text-align: center;
    }
}
</style>